<template>
    <a-card :bordered="false" :bodyStyle="{ padding: '16px 0', height: '100%' }" :style="{ height: '100%' }">
         <a-button style="margin:20px"  @click="$refs.addForm.add()" icon="plus" type="primary" v-if="hasPerm('sysnotice:add')">新 建 消 息</a-button>
        <a-tabs v-model="curTab" tabPosition = "left" :tabBarGutter = '20'  @change="tabChange">
          
            <a-tab-pane v-for="pane in tabList" :key="pane.key">
                <span slot="tab">
                    <a-badge v-if="pane.key === 'send'" :count="0">
                        <a-icon v-if="pane.key === 'send'" type= 'user-add' />
                              {{pane.title}}
                    </a-badge>
                    <a-badge v-if="pane.key === 'receive'" :count="receiveCount">
                        <a-icon v-if="pane.key === 'receive'" type= 'notification' />
                              {{pane.title}}
                    </a-badge>
                </span>
                  <a-row :gutter="24">
                    <a-col :span="10">    
                         <a-row :gutter="24">
                               <a-col v-if="curTab==='receive'" :span="10">   
                                    <a-select placeholder="通知状态" v-model="queryParam.isRead"  allowClear style="width: 100%">
                                          <a-select-option value='false'>
                                            未读
                                        </a-select-option>
                                          <a-select-option value='true'>
                                            已读
                                        </a-select-option>
                                    </a-select>
                               </a-col>
                               <a-col :span="curTab==='receive' ? 14 : 24">    
                                   <a-input-search placeholder="请输入标题关键字" v-model="queryParam.name" enter-button @search="getNoticeList(1)" />
                               </a-col>
                         </a-row>
                         <a-list item-layout="horizontal" :data-source="listData" :pagination="pagination">
                             <a-list-item slot="renderItem" slot-scope="item, index">
                                   <a slot="actions">
                                       <a-popconfirm v-if="hasPerm('sysnotice:delete')" placement="topRight" title="确认删除？" @confirm="() => sysNoticeDelete(item)">
                                             <a-tooltip placement="topLeft" title="删除">  <a-icon type="delete" /></a-tooltip>
                                        </a-popconfirm>
                                   </a>
                                <a-list-item-meta  :description="item.sendTime">
                                    <a style="font-size:14px" slot="title" @click="displayNoticeDetails(item,index)">
                                      <a-tag v-if="!item.isRead && !item.isOriginal" color="#f5222d">new</a-tag>
                                      <a-tag v-if="item.isOriginal && !item.isSend" color="#f5222d">未发送</a-tag>
                                    {{ item.title }} </a>
                                 <!-- <a-avatar v-if="!item.isRead && !item.isOriginal" slot="avatar"  @click="displayNoticeDetails(item,index)" :src="require('../../../assets/new-message.png')" /> -->
                                </a-list-item-meta>
                            </a-list-item>
                        </a-list>
                    </a-col>
                    <a-col :span="14">
                            <div class="article">
                            <a-skeleton :loading="loading">
                            <div>
                                <h1>{{detail.title}}</h1>
                                   <a-row :gutter="20">
                                        <a-col :span="16">    
                                            <p>发送人：{{detail.sendUserName}}</p>
                                        </a-col>
                                         <a-col :span="8">    
                                             <p>{{detail.sendTime}}</p>
                                         </a-col>
                                   </a-row>
                                   <a-divider style="margin:12px 0"/>
                                   <div >
                                    <label v-html="detail.content"></label>
                                  </div>
                            </div>
                            </a-skeleton>
                        </div>
                    </a-col>
                  </a-row>
            </a-tab-pane>
        </a-tabs>
      <add-form ref="addForm" @ok="handleOk" v-if="hasPerm('sysnotice:add')"/>
    </a-card>
</template>

<script>
import { sysNoticePage,sysNoticeRead,sysNoticeDelete } from '@/api/modular/system/noticeManage'
import addForm from './addForm'
export default {
   components: {
      addForm,
    },
  data() {
    return {
    // 查询参数
    queryParam: {},
    listData:[],
    pagination: {
        onChange: page => {
            this.getNoticeList(page)
        },
        total: 0,
        pageSize: 7,
    },
    tabList: [
        {
          key: 'send',
          title: '我发送的消息',
        },
        {
          key: 'receive',
          title: '我接收的消息',
        },
      ],
      curTab: 'receive',
      loading:true,
      receiveCount:0,
      detail:{},
    };
  },
  created () {
      const recode = this.$route.params;
      if(!(Object.keys(recode).length === 0) ){
        this.displayNoticeDetails1(recode);
      }else{
        this.getNoticeList(1);
      }
      
  },
  methods: {
    tabChange(key) {
     this.getNoticeList(1)
    },
      getNoticeList(pageNo){
          this.queryParam.pageNo = pageNo;
          this.queryParam.pageSize =7;
          this.queryParam.isOnlySend = this.curTab === 'receive' ? false : true;
          sysNoticePage(this.queryParam).then((res) => {
            if (res.success) {
                this.pagination.total = res.data.totalRows;
                this.pagination.current = pageNo;
                this.listData = res.data.rows;
                this.receiveCount = res.data.totalQuantity;
            } else {
                this.$message.error('获取消息失败' + res.message)
            }
          })
      },
      displayNoticeDetails(item,index){
          if(!item.isRead){
            sysNoticeRead({id : item.id}).then((res) => {
                if (!res.success) {
                    this.$message.error('读取消息失败' + res.message)
                }
            })
          }
          if(this.receiveCount >0){
              this.receiveCount--;
          }
          item.isRead = true;
          this.listData.splice(index, 1, item);
          this.detail = item;
          this.loading = false;
      },
      displayNoticeDetails1(item){
         if(!item.isRead){
            sysNoticeRead({id : item.id}).then((res) => {
                if (!res.success) {
                    this.$message.error('读取消息失败' + res.message)
                }
                else{
                  this.getNoticeList(1);
                }
            })
          }
          this.detail = item;
          this.loading = false;
      },
      sysNoticeDelete (record) {
        sysNoticeDelete({id: record.id}).then((res) => {
          if (res.success) {
            this.$message.success('删除成功')
            this.getNoticeList(this.pagination.current);
          } else {
            this.$message.error('删除失败：' + res.message)
          }
        }).catch((err) => {
          this.$message.error('删除错误：' + err.message)
        })
      },
      handleOk () {
        this.curTab ='send';
        this.getNoticeList(1)
      },
  },
};
</script>
